<template>
  <div class="data_table_box">
    <div class="filter_table_col" v-if="showFilter">
      <filter-item label="表格列">
        <el-select
          v-model="selectCol"
          multiple
          collapse-tags
          collapse-tags-tooltip
          placeholder="请选择要展示的列"
          style="width: 180px"
        >
          <el-option
            v-for="item in columnData"
            :key="item.id"
            :label="item.label"
            :value="item.id"
          />
        </el-select>
      </filter-item>
    </div>
    <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
      v-bind="$attrs"
      table-layout="fixed"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
        v-if="selection"
      />
      <el-table-column
        type="index"
        label="序号"
        width="80"
        align="center"
        v-if="showIndex"
      />
      <el-table-column
        v-for="column in tableCol"
        :key="column.id"
        :prop="column.id"
        :label="column.label"
        :width="column.width"
        :min-width="column.minWidth"
        :align="column.align || 'center'"
        :showOverflowTooltip="showOverflowTooltip"
      >
        <template #default="scope">
          <slot :name="column.id" v-bind="scope">
            {{ scope.row[column.id] }}
          </slot>
        </template>
      </el-table-column>
      {{ $slots }}
      <el-table-column
        v-if="$slots.operate"
        :label="operateConfig.label"
        :width="operateConfig.width"
        :align="'center'"
      >
        <template #default="scope">
          <slot name="operate" v-bind="scope" />
        </template>
      </el-table-column>
      <slot />
    </el-table>
  </div>
</template>

<script setup>
import { ref, watch, computed } from "vue";
const props = defineProps({
  columnData: {
    type: Array,
    default: () => [],
  },
  tableData: {
    type: Array,
    default: () => [],
  },
  // 是否启用多选
  selection: {
    type: Boolean,
    default: false,
  },
  // 操作栏标签名
  operateConfig: {
    type: Object,
    default: () => {
      return {
        width: "240",
        label: "操作",
        align: "center",
      };
    },
  },
  // 当内容过长被隐藏时显示 tooltip
  showOverflowTooltip: {
    type: Boolean,
    default: true,
  },
  // 是否展示表格列筛选
  showFilter: {
    type: Boolean,
    default: false,
  },
  // 是否展示序号列
  showIndex: {
    type: Boolean,
    default: false,
  },
});

const multipleTableRef = ref();
const selectCol = ref([]);

const tableCol = computed(() =>
  props.columnData.filter((item) => selectCol.value.includes(item.id)),
);

watch(
  () => props.columnData,
  async (newValue) => {
    selectCol.value = newValue.map((item) => item.id);
  },
  {
    immediate: true,
  },
);

defineExpose({
  multipleTableRef,
});
</script>

<style lang="less" scoped>
.filter_table_col {
  margin-bottom: 20px;
}
</style>
